<template>
    <div class="head">
      <div class="head-left">
        <router-link to="/"><img class="logo" src="../assets/logo.png" /></router-link>
        <p>RousePro</p>
      </div>

        <div class="right">
            <div class="connect" @click="connect">{{ show_address }}</div>
            <!-- <img class="more" src="@/assets/more.png" @click="goNav"/> -->
         <!--   <van-icon name="setting-o" size="24" @click="goNav" color="#ffffff" />-->
        </div>
      <div  class="right-nav" @click="showNav=!showNav">
      <img src="../assets/myimages/1.png" width="30" height="18"  />
    </div>
      <NavBar v-if="showNav" @changeNav="changeNav" :showNav="showNav"></NavBar>
    </div>

</template>

<script>


    import tp from 'tp-js-sdk'
    import chain from '../net'
    import { Notify } from 'vant';
    import NavBar from "@/views/NavBar.vue";
    // import { login } from '@/util/api'
    export default {
        name: 'MzhHead',
      components: {NavBar},
        data() {
            return {
              showNav:false,
                showPopover: false,
                actions: [
                    { text: '中文' },
                    { text: 'English' },
                    { text: '한국어' },
                    { text: 'Tiếng Việt' },
                    { text: '日本語' },
                    { text: 'हिंदी' },
                    { text: 'Indonesia' },
                ],
                address: '',
                show_address: this.$t('m.connect')

            };
        },
        props: {
            msg: String
        },
        mounted() {

            const addr = sessionStorage.getItem("show_address");
            console.log(addr)
            if (addr) {
                this.show_address = addr
                this.$store.state.address = sessionStorage.getItem("address");
            }
            console.log("mounted")
        },
        created(){
            this.connect()
        },
        methods: {
          changeNav(nav){
            this.showNav=nav
          },
            // goNav() {
            //     this.$router.push('/nav')
            // },
            async connect() {
                if (tp.isConnected()) {
                    let str1, str2, account
                    tp.getCurrentWallet().then(async (re) => {
                        if (re.data.blockchain !== 'bsc') {
                            await tp.getWallet({ walletTypes: ["bsc"], switch: true })
                            tp.getCurrentWallet().then((result) => {
                                account = result.data.address
                                this.address = account
                                str1 = account.substring(0, 8)
                                str2 = account.substring(36)
                                // this.show_address = str1 + "*****" + str2
                                // this.$store.commit("setAddress", account)
                                // sessionStorage.setItem("show_address", this.show_address);
                                // sessionStorage.setItem("address", account);
                            })

                        } else {
                            account = re.data.address
                            this.address = account
                            str1 = account.substring(0, 6)
                            str2 = account.substring(36)

                        }

                        this.show_address = str1 + "*****" + str2

                        this.$store.commit("setAddress", account)
                        sessionStorage.setItem("show_address", this.show_address);
                        sessionStorage.setItem("address", account);


                    })




                } else {
                    console.log("connect")
                    if (window.ethereum) {
                     //   let cfg = chain[56];
                        let cfg = chain[56];
                        const request = (window.ethereum).request;
                        try {
                            // 切换
                            await request({
                                method: "wallet_switchEthereumChain",
                                params: [{ chainId: cfg.chainId }],
                            });
                            const accounts = await request({ method: "eth_requestAccounts" });

                            this.address =accounts[0]
                            let str1 = accounts[0].substring(0, 6)
                            let str2 = accounts[0].substring(36)
                            this.show_address = str1 + "*****" + str2
                            this.$store.commit("setAddress", this.address)
                            sessionStorage.setItem("show_address", this.show_address);
                            sessionStorage.setItem("address", this.address);





                        } catch (e) {
                            Notify({ type: 'danger', message: this.$t('m.net_error') });
                            const err = e;
                            console.log(err);

                        }

                    } else {
                       /* Notify({ type: 'danger', message: this.$t('m.wallet') });*/
                    }
                }



            }
        },
    }
</script>

<style scoped>
    .logo {
        width: 29px;
        height: 29px;
        margin-top: 5px
    }
    .head-left{
      display: flex;

      flex-direction: row;
      align-content: center;
      align-items: center;
    }

    .more {
        width: 40px;
        height: 40px;
    }
  .head p{
    font-family: 'Dream Han Sans SC';
    font-style: normal;
    font-weight: 693;
    font-size: 18.0851px;
    line-height: 22px;
    text-align: center;
    color: #FB8417;
    margin-left: 5px;

  }
    .head {
        display: flex;
        height: 54px;
        padding: 0px 25px;
        flex-direction: row;
        align-content: center;
        align-items: center;
        justify-content: space-between;
        margin: auto;
        max-width: 500px;
        position: sticky;
        left: 0;
        top: 0;
        z-index: 10;
        /* background-color: #DDFDFA; */
        background: #000;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 0 4px 1px #FB8417;
        margin-top: -8px;
    }

    .right {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 25px;
    }

    .right img {
        width: 30px;
        height: 18px;
      left: 16.67%;
      right: 16.67%;
      top: 25%;
      bottom: 25%;


    }

    .connect {
      color: #fff;
      line-height: 25px;
      box-sizing: border-box;
      text-align: center;
      font-size: 13px;
      height: 29px;
      align-items: center;
      padding: 0px 20px;
      background-color: black;
      border: 2px solid #FB8417;
      border-radius: 8px;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 500;
      font-size: 14px;
      margin-right: 5px;
      /* identical to box height */
      letter-spacing: -0.01em;
      color: #FFFFFF;


    }

    .van-popover__content {
        background-color: #111536 !important;
    }
    .right-nav{
      height: 36px;
      position: absolute;
      right: 0;
      width: 45px;
      line-height: 36px;
      align-items: center;
    }
</style>
